<div id="main" class="production-task">
    <!-- 头 -->
    <div class="title">
        <div></div>
        <div (click)="full()" style="cursor: pointer;margin-left: 135px;">生产任务看板</div>
        <div class="flex-style">
            <div class="time-style mr20" [innerHTML]="time"></div>
            <div class="time-style">
                <div>{{date}}</div>
                <div>{{week}}</div>
            </div>
        </div>
    </div>
    <!-- 下半部分 -->
    <div style="padding: 0 30px;width: 100%;height: calc(90% - 21.61px);margin-top: 21.61px;">
        <!-- 查询 -->
        <div class="board-search">
            <div class="ui-g-2">
                <span style="color: #D9001B;">*</span>
                <span style="color: #FFFFFF;margin-right: 10px;">型号:</span>
                <p-dropdown name="model" filter="true" emptyFilterMessage="暂无数据" [options]="modelOptions"
                    [(ngModel)]="model" [style]="{'width':'150px'}" (onChange)="onchange($event)">
                </p-dropdown>
            </div>
            <div class="ui-g-2">
                <span style="color: #D9001B;">*</span>
                <span style="color: #FFFFFF;margin-right: 10px;">发次:</span>
                <p-dropdown name="sendTime" filter="true" emptyFilterMessage="暂无数据" [options]="sendTimeOptions"
                    [(ngModel)]="sendTime" [style]="{'width':'150px'}">
                </p-dropdown>
            </div>
            <div class="ui-g-2">
                <span style="color: #D9001B;">*</span>
                <span style="color: #FFFFFF;margin-right: 10px;">班组:</span>
                <p-dropdown name="unit" filter="true" emptyFilterMessage="暂无数据" [options]="unitOptions"
                    [(ngModel)]="unit" [style]="{'width':'150px'}">
                </p-dropdown>
            </div>
            <div class="ui-g-6">
                <span style="color: #D9001B;">*</span>
                <span style="color: #FFFFFF;margin-right: 10px;">日期:</span>
                <p-calendar name="rangeDates" [(ngModel)]="rangeDates" selectionMode="range" [readonlyInput]="true">
                </p-calendar>
                <p-button label="查询" (onClick)="search()" style="margin-left: 100px;"></p-button>
            </div>
        </div>
        <div class="board-type" style="margin-top: 20px;">
            <div class="items" (click)="getTypeTable(undefined)">
                <div class="text">{{stuts.total}}</div>
                <div class="text">任务总数</div>
            </div>
            <div class="items" (click)="getTypeTable(1)">
                <div class="text">{{stuts.arrangement}}</div>
                <div class="text">已排配</div>
            </div>
            <div class="items" (click)="getTypeTable(4)">
                <div class="text">{{stuts.notArrangement}}</div>
                <div class="text">未排配</div>
            </div>
            <div class="items" (click)="getTypeTable(3)">
                <div class="text" style="color: #FFFF80;">{{stuts.inProduction}}</div>
                <div class="text">生产中</div>
            </div>
            <div class="items" (click)="getTypeTable(2)">
                <div class="text" style="color:#95F204 ;">{{stuts.complete}}</div>
                <div class="text">已完成</div>
            </div>
            <div class="items" (click)="getTypeTable(7)">
                <div class="text" style="color: #D9001B;">{{stuts.delay}}</div>
                <div class="text">已延迟</div>
            </div>
        </div>
        <div class="board-table" style="margin-top: 20px;">
            <div class="primeng-datatable-container" style="height:100%;">
                <p-table [value]="tableData" [paginator]="false" [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                    scrollHeight="100%" [autoLayout]="true">
                    <ng-template pTemplate="header">
                        <tr>
                            <th style="width: 70px;">序号</th>
                            <th style="width: 100px">任务编号</th>
                            <th style="width: 80px">型号</th>
                            <th style="width: 80px">发次</th>
                            <th style="width: 100px">规程编号</th>
                            <th style="width: 100px">规程名称</th>
                            <th style="width: 100px">工序图号</th>
                            <th style="width: 100px">工序名称</th>
                            <th style="width: 100px">工步图号</th>
                            <!-- <th style="width: 100px">工步内容</th> -->
                            <th style="width: 80px">标准工时</th>
                            <th style="width: 80px">配套状况</th>
                            <th style="width: 100px">计划开始日期</th>
                            <th style="width: 100px">计划完成日期</th>
                            <th style="width: 80px">状态</th>
                            <th style="width: 100px">装配班组</th>
                            <th style="width: 100px">装配人员</th>
                            <th style="width: 100px">装配开始日期</th>
                            <th style="width: 100px">装配完成日期</th>
                            <th style="width: 100px">工时提报</th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                        <tr>
                            <td style="width: 70px;">{{rowIndex+1}}</td>
                            <td style="width: 100px">{{record.jobNumber}}</td>
                            <td style="width: 80px">{{record.model}}</td>
                            <td style="width: 80px">{{record.lotNo}}</td>
                            <td style="width: 100px">{{record.techniqueNumber}}</td>
                            <td style="width: 100px">{{record.techniqueName}}</td>
                            <td style="width: 100px">{{record.drawingNo}}</td>
                            <td style="width: 100px">{{record.productionName}}</td>
                            <td style="width: 100px">{{record.workStepDrawingNo}}</td>
                            <!-- {{record.workStepName}} -->
                            <!-- <td style="width: 100px" [innerHTML]="record.workStepName"></td> -->
                            <td style="width: 80px">{{record.workingHour}}</td>
                            <td style="width: 80px">{{record.matchingCondition}}</td>
                            <td style="width: 100px">{{record.startTime | momentFormat:'YYYY-MM-DD'}}</td>
                            <td style="width: 100px">{{record.endTime | momentFormat:'YYYY-MM-DD'}}</td>
                            <td style="width: 80px">{{record.productingStatusDesc}}</td>
                            <td style="width: 100px">{{record.organizationUnitDesc}}</td>
                            <td style="width: 100px">{{record.userName}}</td>
                            <td style="width: 100px">{{record.assemblyStartTime | momentFormat:'YYYY-MM-DD'}}</td>
                            <td style="width: 100px">{{record.assemblyEndTime | momentFormat:'YYYY-MM-DD'}}</td>
                            <td style="width: 100px">{{record.productedStatusDesc}}</td>
                        </tr>
                    </ng-template>
                </p-table>
            </div>
        </div>
    </div>

</div>